<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="授权申购"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div class="agent-item shopKeeper">
                <span class="agent-times">剩余授权次数：{{userData.store_quota}}</span>
            </div>

            <div class="agent-item provider">
                <span class="agent-times">剩余授权次数：{{userData.service_quota}}</span>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div
            class="buy-bg"
            v-if="isBuy"
        >
            <div
                class="buy-main"
                :class="isMove==true?'move':''"
            >
                <img
                    class="
                close-btn"
                    src="@/assets/images/userCenter/close-icon.png"
                    @click="closeBuy"
                />
                <div class="buy-info-box">
                    <img
                        class="buy-img"
                        :src="['',require('@/assets/images/userCenter/shopKeeper-img.png'),require('@/assets/images/userCenter/provider-img.png')][selectType]"
                    />
                    <div class="buy-info">
                        <div class="buy-info-price">￥{{['',shopKeeperPrice,providerPrice][selectType] | currency}}</div>
                    </div>
                </div>
                <div class="type-select-box">
                    <div class="type-select-title">级别分类</div>
                    <div class="type-select-list">
                        <div
                            class="type-select-item"
                            :class="selectType == 1?'active': ''"
                            @click="changeType(1)"
                        >金牌店主</div>
                        <div
                            class="type-select-item"
                            :class="selectType == 2?'active': ''"
                            @click="changeType(2)"
                        >服务商</div>
                    </div>
                </div>
                <div class="buy-num-box">
                    <div class="buy-num-title">购买数量</div>
                    <div class="buy-num-main">
                        <span
                            class="minus"
                            @click="minus"
                        >-</span>
                        <input
                            class="buy-num-input"
                            type="number"
                            readonly
                            v-model="buyNum"
                        />
                        <span
                            class="add"
                            @click="add"
                        >+</span>
                    </div>
                </div>

                <div
                    class="buy-btn"
                    @click="goBuy"
                >立即购买</div>
                <div class="all-price">总价：￥{{['',shopKeeperPrice,providerPrice][selectType]*buyNum | currency}} </div>
            </div>
        </div>

        <div
            class="go-buy-btn"
            @click="showBuy"
        >立即购买授权</div>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import { setTimeout } from 'timers'
export default {
    name: 'AgentTimes',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.29rem'
            },
            userInfo: '',
            userData: '',
            isBuy: false,
            isMove: false,
            selectType: 1,
            buyNum: 1,
            shopKeeperPrice: 0,
            providerPrice: 0,
            shopKeeperLimit: 0,
            providerLimit: 0,
            wxPayParams: ''
        }
    },
    mounted() {
        this.getUserInfo()
        this.getAgentTimes()
        this.getAgentInfo()
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        },
        getAgentInfo() {
            let postData = this.qs.stringify({
                user_id: this.userInfo.id
            })
            this.axios
                .post('/api/user/agent/quota/list.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.shopKeeperPrice = data.data[0].price
                        this.shopKeeperLimit = data.data[0].min_buy
                        this.providerPrice = data.data[1].price
                        this.providerLimit = data.data[1].min_buy
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        getAgentTimes() {
            this.axios.post('/api/user/data.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.userData = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        showBuy() {
            const that = this
            this.isBuy = true
            setTimeout(() => {
                that.isMove = true
            }, 20)
        },
        closeBuy() {
            this.isBuy = false
            this.isMove = false
        },
        changeType(index) {
            this.selectType = index
            if (index == 1) {
                this.buyNum = this.shopKeeperLimit
            } else {
                this.buyNum = this.providerLimit
            }
        },
        minus() {
            if (this.buyNum > 1) {
                this.buyNum--
            }
        },
        add() {
            this.buyNum++
        },
        goBuy() {
            const that = this
            let postData = this.qs.stringify({
                goods_id: this.selectType,
                num: this.buyNum
            })
            this.axios
                .post('/api/user/agent/quota/buy.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        that.wxPayParams = data.data
                        if (typeof WeixinJSBridge == 'undefined') {
                            if (document.addEventListener) {
                                document.addEventListener(
                                    'WeixinJSBridgeReady',
                                    onBridgeReady,
                                    false
                                )
                            } else if (document.attachEvent) {
                                document.attachEvent(
                                    'WeixinJSBridgeReady',
                                    onBridgeReady
                                )
                                document.attachEvent(
                                    'onWeixinJSBridgeReady',
                                    onBridgeReady
                                )
                            }
                        } else {
                            that.onBridgeReady()
                        }
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        onBridgeReady() {
            const that = this
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                this.wxPayParams,
                function(res) {
                    if (res.err_msg == 'get_brand_wcpay_request:ok') {
                        that.axios
                            .post('api/user/agent/quota/check_order.json')
                            .then(res => {
                                that.isBuy = false
                                that.getAgentTimes()
                            })
                    }
                }
            )
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.agent-item
    position relative
    width 9.31rem
    height 4.75rem
    margin 0.32rem auto
    .agent-times
        position absolute
        bottom 0.32rem
        right 0.32rem
        font-size 0.38rem
        color #fff
.shopKeeper
    background-image url('../../assets/images/userCenter/shopKeeper-icon.png')
    background-repeat no-repeat
    background-size 100% 100%
.provider
    background-image url('../../assets/images/userCenter/provider-icon.png')
    background-repeat no-repeat
    background-size 100% 100%
.go-buy-btn
    position absolute
    bottom 0
    left 0
    right 0
    height 1.29rem
    line-height 1.29rem
    text-align center
    background #d7463c
    font-size 0.38rem
    color #fff
.buy-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    z-index 9
    .buy-main
        position absolute
        bottom -9.6rem
        left 0
        right 0
        height 9.6rem
        background #fff
        border-radius 15px 15px 0 0
        transition bottom 0.5s
        .close-btn
            position absolute
            top 0.4rem
            right 0.4rem
            width 0.45rem
            height 0.45rem
        .buy-info-box
            display flex
            align-items center
            padding 0.37rem 0.35rem 0 0.35rem
            .buy-img
                width 2.97rem
                height 2.97rem
            .buy-info
                flex 1
                height 2.97rem
                margin-left 0.27rem
                .buy-info-price
                    margin-top 0.4rem
                    font-size 0.53rem
                    color #d7463c
        .type-select-box
            padding 0.27rem 0.35rem
            .type-select-title
                line-height 1.01rem
                font-size 0.37rem
                color #333
            .type-select-list
                display flex
                .type-select-item
                    width 2.91rem
                    height 0.75rem
                    line-height 0.75rem
                    text-align center
                    background #f5f5f5
                    font-size 0.37rem
                    color #333
                    border 1px solid #f5f5f5
                    border-radius 3px
                    margin-right 0.37rem
                .active
                    color #d7463c
                    background #fff
                    border 1px solid #d7463c
        .buy-num-box
            display flex
            align-items center
            justify-content space-between
            height 1.31rem
            border-top 1px solid #e5e5e5
            border-bottom 1px solid #e5e5e5
            margin 0.35rem
            .buy-num-title
                font-size 0.37rem
                color #333
            .buy-num-main
                display flex
                .minus, .add
                    width 0.75rem
                    line-height 0.59rem
                    text-align center
                    font-size 0.45rem
                    color #666
                    background #ddd
                    border-radius 2px
                .buy-num-input
                    width 0.75rem
                    line-height 0.59rem
                    text-align center
                    font-size 0.3rem
                    color #666
                    background #ddd
                    border-radius 2px
                    border none
                    outline none
                    margin 0 0.05rem
        .all-price
            padding 0 0.35rem
            line-height 0.4rem
            text-align right
            font-size 0.38rem
            color #d7463c
        .buy-btn
            position absolute
            bottom 0
            left 0
            right 0
            height 1.29rem
            line-height 1.29rem
            text-align center
            background #d7463c
            font-size 0.38rem
            color #fff
    .move
        bottom 0
</style>


